<template>
	<view class="page" :style="loading ? 'opacity: 0;' : 'opacity: 1;'">
		<!--  v-model="dataList" @query="queryList" -->
		<pageTxt>
			<z-paging ref="paging" :paging-style="{ 'background-color': '#f7f7f7', height: '100%', width: '100%' }">
				<!-- 头部 -->
				<template slot="top">
					<view class="navbar-box">
						<u-navbar title="发起整改单" :autoBack="true" :fixed="false"></u-navbar>
					</view>
				</template>
				<view class="add-content ios">
					<u--form labelPosition="top" :model="addForm" ref="uForm" labelWidth="auto">
						<view class="form-box">
							<u-form-item labelPosition="top" labelWidth="100%" required label="项目名称" borderBottom @click="cascaderFunc('projectShow')">
								<u--input
									placeholder="选择项目"
									inputAlign="left"
									v-model="addForm.project_name"
									border="none"
									color="#000000"
									fontSize="28rpx"
									disabled
									disabledColor="#ffffff"
									suffixIcon="arrow-right"
									suffixIconStyle="color: #727272;font-size:24rpx;font-weight:500;"
									placeholderStyle="font-weight: 400;font-size: 28rpx;color: #B1B1B0;"
								></u--input>
							</u-form-item>
							<u-form-item labelPosition="top" labelWidth="100%" required label="限期整改日期" borderBottom>
								<picker mode="date" @change="dateFunc">
									<u--input
										placeholder="选择限期整改日期"
										inputAlign="left"
										v-model="addForm.deadline_rectification"
										border="none"
										color="#000000"
										fontSize="28rpx"
										disabled
										disabledColor="#ffffff"
										suffixIcon="arrow-right"
										suffixIconStyle="color: #727272;font-size:24rpx;font-weight:500;"
										placeholderStyle="font-weight: 400;font-size: 28rpx;color: #B1B1B0;"
									></u--input>
								</picker>
							</u-form-item>
							<u-form-item labelPosition="top" labelWidth="100%" required label="是否影响开业">
								<u-radio-group v-model="addForm.is_affect_opening" placement="row">
									<u-radio label="影响" :name="1"></u-radio>
									<u-radio label="不影响" :name="2"></u-radio>
								</u-radio-group>
							</u-form-item>
						</view>

						<view class="add-box">
							<template v-for="(item, index) in addForm.change_arr">
								<view class="title-box flex ac jb" :key="index">
									<view class="title">整改{{ index + 1 }}</view>
									<view class="del" @click="delSpecsFunc(index)">删除</view>
								</view>
								<view class="form-box" :key="index">
									<u-form-item labelPosition="top" labelWidth="100%" required label="整改区域" borderBottom @click="cascaderFunc('rectificationAreaShow', index)">
										<u--input
											placeholder="选择整改区域"
											inputAlign="left"
											v-model="item.rectification_area_name"
											border="none"
											color="#000000"
											fontSize="28rpx"
											disabled
											disabledColor="#ffffff"
											suffixIcon="arrow-right"
											suffixIconStyle="color: #727272;font-size:24rpx;font-weight:500;"
											placeholderStyle="font-weight: 400;font-size: 28rpx;color: #B1B1B0;"
										></u--input>
									</u-form-item>
									<u-form-item labelPosition="top" labelWidth="100%" required label="整改类型" borderBottom @click="cascaderFunc('rectificationTypeShow', index)">
										<u--input
											placeholder="选择整改类型"
											inputAlign="left"
											v-model="item.rectification_type_name"
											border="none"
											color="#000000"
											fontSize="28rpx"
											disabled
											disabledColor="#ffffff"
											suffixIcon="arrow-right"
											suffixIconStyle="color: #727272;font-size:24rpx;font-weight:500;"
											placeholderStyle="font-weight: 400;font-size: 28rpx;color: #B1B1B0;"
										></u--input>
									</u-form-item>
									<u-form-item labelPosition="top" labelWidth="100%" required label="整改内容" borderBottom>
										<u--input
											placeholder="输入整改内容"
											inputAlign="left"
											v-model="item.rectification_content"
											border="none"
											color="#000000"
											fontSize="28rpx"
											disabledColor="#ffffff"
											suffixIconStyle="color: #727272;font-size:24rpx;font-weight:500;"
											placeholderStyle="font-weight: 400;font-size: 28rpx;color: #B1B1B0;"
										></u--input>
									</u-form-item>
									<u-form-item labelPosition="top" labelWidth="100%" required label="图片">
										<file-upload :count="9" :type="1" @afterRead="afterRead(index, $event)" @delete="deletePic(index, $event)"></file-upload>
									</u-form-item>
								</view>
							</template>
							<!-- 添加 -->
							<u-button
								@click="addSpecsFunc"
								icon="plus"
								iconColor="#3B75FF"
								text="添加"
								customStyle="font-size:28rpx;color:#3B75FF;border:none;border-radius: 12rpx;"
							></u-button>
						</view>
					</u--form>
				</view>
				<view class="footer ios">
					<u-button
						text="提交"
						@click="submit"
						customStyle="width: 702rpx;height: 88rpx;background: #3B75FF;border-radius: 16rpx;font-weight: 500;font-size: 28rpx;color: #FFFFFF;margin:20rpx 24rpx;"
					></u-button>
				</view>
			</z-paging>
			<!-- 项目列表 -->
			<u-picker
				ref="projectShow"
				title="项目列表"
				closeOnClickOverlay
				:show="projectShow"
				:columns="[projectList]"
				@confirm="confirmFunc($event, 'projectShow')"
				@cancel="closeFunc('projectShow')"
				@close="closeFunc('projectShow')"
				keyName="project_name"
			></u-picker>
			<!-- 整改区域 -->
			<u-picker
				ref="rectificationAreaShow"
				title="整改区域"
				closeOnClickOverlay
				:show="rectificationAreaShow"
				:columns="[rectificationAreaList]"
				@confirm="confirmFunc($event, 'rectificationAreaShow')"
				@cancel="closeFunc('rectificationAreaShow')"
				@close="closeFunc('rectificationAreaShow')"
				keyName="label"
			></u-picker>
			<!-- 整改类型 -->
			<u-picker
				ref="rectificationTypeShow"
				title="整改类型"
				closeOnClickOverlay
				:show="rectificationTypeShow"
				:columns="[rectificationTypeList]"
				@confirm="confirmFunc($event, 'rectificationTypeShow')"
				@cancel="closeFunc('rectificationTypeShow')"
				@close="closeFunc('rectificationTypeShow')"
				keyName="label"
			></u-picker>
		</pageTxt>
	</view>
</template>

<script>
export default {
	data() {
		return {
			loading: false,
			addForm: {
				project_id: '',
				project_name: '',
				is_affect_opening: 1,
				deadline_rectification: '',
				change_arr: [
					{
						rectification_content: '',
						rectification_area: '',
						rectification_type: '',
						rectification_area_name: '',
						rectification_type_name: '',
						rectification_file: []
					}
				]
			},
			projectList: [], //项目类型
			rectificationAreaList: [
				{
					label: '前区',
					value: 1
				},
				{
					label: '后区',
					value: 2
				},
				{
					label: '仓库',
					value: 3
				}
			], //整改区域
			rectificationTypeList: [
				{
					label: '水电',
					value: 1
				},
				{
					label: '吊顶',
					value: 2
				},
				{
					label: '门头',
					value: 3
				}
			], //整改类型
			projectShow: false, //项目列表弹窗
			rectificationAreaShow: false, //整改区域弹窗
			rectificationTypeShow: false, //整改类型弹窗
			currIndex: 0 //当前点击的整改区域，类型项
		};
	},
	onLoad() {
		this.selectProjectList();
	},
	methods: {
		// 日期选择
		dateFunc(e) {
			this.addForm.deadline_rectification = e.detail.value;
		},
		// picker 弹窗打开
		cascaderFunc(type, index) {
			switch (type) {
				case 'projectShow':
					this.projectShow = true;
					break;
				case 'rectificationAreaShow':
					this.currIndex = index;
					this.rectificationAreaShow = true;
					break;
				case 'rectificationTypeShow':
					this.currIndex = index;
					this.rectificationTypeShow = true;
					break;

				default:
			}
		},
		// picker 弹窗关闭
		closeFunc(type) {
			switch (type) {
				case 'projectShow':
					this.projectShow = false;
					break;
				case 'rectificationAreaShow':
					this.rectificationAreaShow = false;
					break;
				case 'rectificationTypeShow':
					this.rectificationTypeShow = false;
					break;

				default:
			}
		},
		// picker 弹窗选择
		confirmFunc(e, type) {
			console.log(e);
			switch (type) {
				case 'projectShow':
					this.addForm.project_name = e.value[0].project_name;
					this.addForm.project_id = e.value[0].id;
					this.projectShow = false;
					break;
				case 'rectificationAreaShow':
					this.addForm.change_arr[this.currIndex].rectification_area = e.value[0].value;
					this.addForm.change_arr[this.currIndex].rectification_area_name = e.value[0].label;
					this.rectificationAreaShow = false;
					break;
				case 'rectificationTypeShow':
					this.addForm.change_arr[this.currIndex].rectification_type = e.value[0].value;
					this.addForm.change_arr[this.currIndex].rectification_type_name = e.value[0].label;
					this.rectificationTypeShow = false;
					break;
				default:
			}
		},
		afterRead(index, files) {
			files.map((item) => {
				let obj = {
					url: item.url
				};
				this.addForm.change_arr[index].rectification_file.push(obj);
			});
		},
		deletePic(index, e) {
			this.addForm.change_arr[index].rectification_file.splice(e.index, 1);
		},
		isNullFunc() {
			let addForm = this.addForm;
			if (!addForm.project_name) {
				uni.showToast({
					title: '请选择项目',
					icon: 'error'
				});
				return false;
			}
			if (!addForm.deadline_rectification) {
				uni.showToast({
					title: '请限期整改日期',
					icon: 'error'
				});
				return false;
			}
			for (let i = 0; i < addForm.change_arr.length; i++) {
				if (!addForm.change_arr[i].rectification_area_name) {
					uni.showToast({
						title: `请选择“整改${i + 1}”的整改区域`,
						icon: 'error'
					});
					return false;
				}
				if (!addForm.change_arr[i].rectification_type_name) {
					uni.showToast({
						title: `请选择“整改${i + 1}”的整改类型`,
						icon: 'error'
					});
					return false;
				}
				if (!addForm.change_arr[i].rectification_content) {
					uni.showToast({
						title: `请输入“整改${i + 1}”的整改内容`,
						icon: 'error'
					});
					return false;
				}
				if (!addForm.change_arr[i].rectification_file.length) {
					uni.showToast({
						title: `请选择“整改${i + 1}”的图片`,
						icon: 'error'
					});
					return false;
				}
			}
			return true;
		},
		async submit() {
			let addForm = this.addForm;
			let ajaxNum = 0;
			console.log(addForm);
			if (!this.isNullFunc()) return;
			addForm.change_arr.forEach((item) => {
				let data = {
					project_id: addForm.project_id,
					is_affect_opening: addForm.is_affect_opening,
					deadline_rectification: addForm.deadline_rectification,
					rectification_content: item.rectification_content,
					rectification_area: item.rectification_area,
					rectification_type: item.rectification_type
				};
				uni.showLoading({
					title: '文件上传中',
					mask: true
				});
				this.$upload(item.rectification_file).then((img) => {
					uni.hideLoading();
					data.rectification_file = img.arrResult;
					this.addRectification(data, (res) => {
						if (res.code == 200) ajaxNum += 1;
						if (ajaxNum == addForm.change_arr.length) {
							uni.hideLoading();
							uni.showToast({
								title: '操作成功',
								icon: 'success'
							});
							var pages = getCurrentPages();
							var perPage = pages[pages.length - 2];
							if (perPage.$vm.$refs.engineeringRectification) {
								perPage.$vm.$refs.engineeringRectification.searchFunc();
							}

							setTimeout(() => {
								if (perPage) {
									uni.navigateBack({
										delta: 1
									});
								} else {
									uni.reLaunch({
										url: '/pages/index/index'
									});
								}
							}, 500);
						}
					});
				});
			});
		},
		// 新增整改单
		addRectification(obj, cb) {
			uni.showLoading({
				title: '信息提交中',
				mask: true
			});
			this.$Apipc.addRectification(obj).then((res) => {
				console.log(res, '新增整改单');
				uni.hideLoading();
				cb && cb(res);
			});
		},
		// 添加整改内容
		addSpecsFunc() {
			this.addForm.change_arr.push({
				rectification_content: '',
				rectification_area: '',
				rectification_type: '',
				rectification_area_name: '',
				rectification_type_name: '',
				rectification_file: []
			});
		},
		// 删除整改内容
		delSpecsFunc(index) {
			if (this.addForm.change_arr.length == 1) {
				uni.showToast({
					title: '至少需要有一项整改内容',
					icon: 'error'
				});
				return;
			}
			this.addForm.change_arr.splice(index, 1);
		},
		// 项目列表
		selectProjectList() {
			this.$Apipc
				.selectProjectList({
					construction_status_arr: [45]
				})
				.then((res) => {
					console.log(res, '项目列表');
					if (res.code == 200) {
						this.projectList = res.data;
					}
				});
		}
	}
};
</script>

<style lang="scss" scoped>
.add-box {
	width: 100%;
	padding: 2rpx;
	box-sizing: border-box;

	.title-box {
		width: 100%;
		padding: 10rpx 10rpx;
		box-sizing: border-box;

		.title {
			font-weight: 400;
			font-size: 26rpx;
			color: #000000;
		}

		.del {
			font-weight: 400;
			font-size: 26rpx;
			color: #3b75ff;
			text-decoration: underline;
		}
	}
}
</style>
